<!-- src/components/ChartCard.vue -->
<template>
    <el-card class="common-card" :class="{ 'card-clickable': clickable }" @click="handleClick">
      <template #header v-if="title || $slots.header">
        <div class="card-header">
          <span class="card-title">{{ title }}</span>
          <div class="card-actions" v-if="$slots.actions">
            <slot name="actions"></slot>
          </div>
        </div>
      </template>
  
      <div class="chart-container" :style="{ height }">
        <div ref="chartRef" style="width: 100%; height: 100%"></div>
      </div>
  
      <div class="card-footer" v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
    </el-card>
  </template>
  
  <script setup lang="ts">
  import { onMounted, onBeforeUnmount, ref, watch, shallowRef } from 'vue'
  import * as echarts from 'echarts'
  
  interface Props {
    title?: string
    clickable?: boolean
    option?: echarts.EChartsOption // 👈 核心：动态接收图表配置
    height?: string // 自定义高度
  }
  
  const props = withDefaults(defineProps<Props>(), {
    title: '',
    clickable: false,
    option: () => ({}),
    height: '400px'
  })
  
  const emit = defineEmits<{
    (e: 'click'): void
    (e: 'chart-click', params: any): void // 图表点击事件
  }>()
  
  const chartRef = ref<HTMLDivElement | null>(null)
  const chartInstance = shallowRef<echarts.ECharts | null>(null)
  
  // 初始化图表
  const initChart = () => {
    if (!chartRef.value) return
  
    chartInstance.value = echarts.init(chartRef.value)
    
    // 监听点击
    chartInstance.value.on('click', (params) => {
      emit('chart-click', params)
    })
  
    setOption()
  }
  
  // 设置/更新配置
  const setOption = () => {
    if (!chartInstance.value || !props.option) return
    chartInstance.value.setOption(props.option, true)
  }
  
  // 响应 option 变化
  watch(
    () => props.option,
    () => {
      setOption()
    },
    { deep: true }
  )
  
  // 窗口大小变化时重绘
  const resizeChart = () => {
    chartInstance.value?.resize()
  }
  window.addEventListener('resize', resizeChart)
  
  // 生命周期
  onMounted(() => {
    initChart()
  })
  
  onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart)
    chartInstance.value?.dispose()
  })
  
  // 卡片点击
  const handleClick = () => {
    if (props.clickable) {
      emit('click')
    }
  }
  </script>
  
  <style scoped>
  .common-card {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .card-clickable {
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .card-title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
  }
  
  .card-actions {
    display: flex;
    align-items: center;
  }
  
  .chart-container {
    width: 100%;
    /* height 由 props 控制 */
  }
  
  .card-footer {
    padding-top: 10px;
    border-top: 1px solid #eee;
  }
  </style>

